<template>
    <el-card style="margin-bottom: 80px;">
        <el-button type="primary" style="margin-bottom: 10px" @click="add">
            新增商品
        </el-button>
        <!-- 新增分类的弹出框 -->
        <el-dialog v-model="dialogVisible" :title="id ? '修改商品' : '新增商品'" :before-close="handleBeforeClose">
            <GoodsEdit ref="form" :id="id" @success="editSuccess" />
        </el-dialog>
        <div>
            <el-table :data="tableData" style="width: 100%" row-key="id" border default-expand-all>
                <el-table-column prop="id" label="商品编号" width="100" />
                <el-table-column prop="name" label="商品名称" width="260" />
                <el-table-column prop="price" label="商品价格" width="100" />
                <el-table-column prop="stock" label="商品库存" width="100" />
                <el-table-column prop="description" label="商品简介" />
                <el-table-column prop="picture" label="商品图片" width="120">
                    <template #default="{ row }">
                        <el-image v-if="row.picture != ''" :src="row.picture" fit="contain"
                            style="display: flex; align-items: center; height: 60px" />
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200px">
                    <template #default="{ row }">
                        <el-button type="warning" @click="edit(row)">编辑</el-button>
                        <el-button type="danger" @click="del(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="page" background layout="prev, pager, next" :total="total"
                :page-size="pagesize" @current-change="handleCurrentChange" style="margin-top: 20px;" />
        </div>
    </el-card>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getGoodsList, getGoodsOnePage,delGoods } from "../../api/api";
import { ElMessageBox } from "element-plus";
import GoodsEdit from "../../components/GoodsEdit.vue";
import config from '../../config'

const tableData = ref([]);
const form = ref();
const id = ref(0);
const dialogVisible = ref(false);
const page = ref(1)
const pagesize = ref(2)
const total = ref()
onMounted(() => {
    loadGoodsList();
});
const loadGoodsList = async () => {
    const params = {
        page: page.value,
        pagesize: pagesize.value
    }
    const data = await getGoodsOnePage(params)
    for (var i = 0; i < data.length; i++) {
        const baseURL=config.baseURL;
        data[i].description = removeTags(data[i].description);
        data[i].picture = data[i].picture ? `${baseURL}${data[i].picture}` : '';
    }
    const list = await getGoodsList();
    total.value = list.length;
    tableData.value = data;
};

const removeTags = str => {
    return str.replace(/<[^>]+>/g, '')
}

const add = (row) => {
    if (form.value) {
        form.value.resetForm(0);
    }
    id.value = row.id;
    dialogVisible.value = true;
};
const edit = (row) => {
    if (form.value) {
        form.value.resetForm(row.id);
    }
    id.value = row.id;
    dialogVisible.value = true;
};
const del = (row) => {
    ElMessageBox.confirm("确定删除吗?", {
        showClose: false,
        closeOnClickModal: false,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    }).then(async () => {
        if (await delGoods({ id: row.id })) {
            loadGoodsList();
        }
    });

};
const handleCurrentChange = value => {
    page.value = value;
    loadGoodsList();
}
const handleBeforeClose = () => {
    ElMessageBox.confirm("确定要关闭吗?", {
        showClose: false,
        closeOnClickModal: false,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    }).then(async () => {
        dialogVisible.value = false;
    }).catch(() => { });
};

const editSuccess = async () => {
    dialogVisible.value = false;
    loadGoodsList();
};
</script>